<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <img :src="imgPath" v-imgerror="'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'">
        <!-- 将默认图片传入指令中 -->
    </div>
</body>
<script>
    // 什么叫自定义指令
    // 用途：操作dom元素
    // 特征：自定义属性，v-开头
    // 语法：
    Vue.directive('imgerror',{
        // 生命周期：一个事物从生到死的过程
        // 钩子函数：生到死某个阶段，vue给了机会来执行代码
        inserted(el,binding){
            //情况3 时就会触发
            if(!el.src){
                    el.src=binding.value
                }
            el.onerror=function(){
                this.src=binding.value// 接收指令的值
            }
        },
            // 方数据发生变化，情况2 时就会触发
     update(el,binding){
                console.log('update')
                if(!el.src){
                    el.src=binding.value
                }

            }

    })
    new Vue({
        el:'#app',
        data(){
            return{
                // imgPath:'http://localhost:8080/undefined.png'
                imgPath:undefined
            }
        },
        created(){
            setTimeout(()=>{
                // 情况1 服务器返回失效的图片
                // this.imgPath = 'http://localhost:8080/undefined.png'
                // 情况2 服务器返回null
                // this.imgPath = null
                // 情况3 服务器返回undefined
                this.imgPath = undefined
            },500)
        }
    })

</script>
</html>
